import React from 'react'

/**
 * 合成事件
 */
export  default class MergeEvents extends React.Component {

    state = {
        x:0,
        y:0,
        z:0
    }

    handler = (ev)=>{
        console.log(this);//实例.handler this指向实例
        console.log(ev);//合成事件对象
    }

    handlerWithArg = (x,y,ev)=>{
        //最后一个一定是合成事件对象
        console.log(x,y,ev);
    }

    handlerWithNoThis = (ev)=>{
        console.log(ev);//合成事件对象
        console.log(this);//获取不到this为undefined
    }

    handlerWithBindGetThis = (ev)=>{
        console.log(ev);
        console.log(this);//获取得到this,bind绑定的this
    }

    render() {
        return (
            <>
                <div>
                    x:{this.state.x};
                    y:{this.state.y},
                    z:{this.state.z}
                </div>
                <button onClick={this.handlerWithNoThis}>普通函数无法获取this</button>
                <button onClick={this.handlerWithBindGetThis.bind(this)}>普通函数使用bind绑定this</button>
                {/*为什么不用call或apply?call或apply会直接触发函数*/}
                <button onClick={this.handler}>箭头函数获取合成事件对象与this</button>
                <button onClick={this.handlerWithArg.bind(null,1,2)}>使用bind传递多余参数</button>
            </>
        )
    }

}